<template>
	<div class="invest">
		<table>
			<tr id="investment">
				<td class="td1"><span>投资金额</span></td>
				<td class="td2">
					<el-input v-model="investment" @input="countIncome()" placeholder="请输入" maxlength="6" size="small"></el-input>
				</td>
				<td class="td3">
					<el-radio-group v-model="investmentUnit" size="mini" @change="countIncome()">
						<el-radio-button label="万"></el-radio-button>
						<el-radio-button label="元"></el-radio-button>
					</el-radio-group>
				</td>
			</tr>
			<tr id="investTimeLimit">
				<td class="td1"><span>投资期限</span></td>
				<td class="td2">
					<el-input v-model="investTimeLimit" @input="countIncome()" placeholder="请输入" maxlength="6" size="small"></el-input>
				</td>
				<td class="td3">
					<el-radio-group v-model="investTimeUnit" size="mini" @change="setInvestAgainUnit()">
						<el-radio-button label="年"></el-radio-button>
						<el-radio-button label="月"></el-radio-button>
						<el-radio-button label="日"></el-radio-button>
					</el-radio-group>
				</td>
			</tr>
			<tr id="investCountMode">
				<td class="td1"><span>计算方式</span></td>
				<td class="td2" colspan="2">
					<el-radio-group v-model="investCountMode" size="mini" @change="switchCountMode()">
						<el-radio-button label="单利"></el-radio-button>
						<el-radio-button label="复利"></el-radio-button>
					</el-radio-group>
				</td>
			</tr>
			<tr id="investAgain">
				<td class="td1"><span>复利单位</span></td>
				<td class="td2" colspan="2">
					<el-radio-group v-model="investAgain" size="mini" @change="setInvestTimeUnit()">
						<el-radio-button label="年"></el-radio-button>
						<el-radio-button label="月"></el-radio-button>
						<el-radio-button label="日"></el-radio-button>
					</el-radio-group>
				</td>
			</tr>
			<tr id="investRate" ref="investRate">
				<td class="td1"><span>收益率(%)</span></td>
				<td class="td2">
					<el-input v-model="investRate" @change="parseWanOfIncome()" placeholder="请输入" maxlength="6" size="small"></el-input>
				</td>
				<td class="td3">
					<el-radio-group v-model="investRateUnit" size="mini" @change="parseWanOfIncome()">
						<el-radio-button label="年"></el-radio-button>
						<el-radio-button label="月"></el-radio-button>
						<el-radio-button label="日"></el-radio-button>
					</el-radio-group>
				</td>
			</tr>
			<tr id="investWanOfIncome">
				<td class="td1"><span>万份收益</span></td>
				<td class="td2">
					<el-input v-model="investWanOfIncome" @change="parseRate()" placeholder="请输入" maxlength="6" size="small"></el-input>
				</td>
			</tr>
			<tr id="investIncomeInterest" ref="investIncomeInterest">
				<td class="td1"><span>获取利息(元)</span></td>
				<td class="td2">
					<el-input v-model="investIncomeInterest" @change="countRate()" placeholder="请输入" maxlength="6" size="small"></el-input>
				</td>
			</tr>
			<tr id="investIncomeTotal">
				<td class="td1"><span>获取总金额(元)</span></td>
				<td class="td2" colspan="2">{{investIncomeTotal}}</td>
			</tr>
		</table>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				investment: 0,
				investmentUnit: '万',
				investTimeLimit: 0,
				investTimeUnit: '年',
				investCountMode: '单利',
				investAgain: '日',
				investRate: 3,
				investRateUnit: '年',
				investWanOfIncome: 0,
				investIncomeInterest: 0,
				investIncomeTotal: 0,
			}
		},
		computed: {
			conversion() {
				let p, n, r;
				if(this.investmentUnit=='万'){
					p = this.investment*10000;
				}else if(this.investmentUnit=='元'){
					p = this.investment;
				}
				if(this.investAgain=='年'){
					if(this.investRateUnit=='年'){
						r = this.investRate;
					}else if(this.investRateUnit=='月'){
						r = this.investRate * 12;
					}else if(this.investRateUnit=='日'){
						r = this.investRate * 360;
					}
					if(this.investTimeUnit=='年'){
						n = this.investTimeLimit;
					}
				}else if(this.investAgain=='月'){
					if(this.investRateUnit=='年'){
						r = this.investRate / 12;
					}else if(this.investRateUnit=='月'){
						r = this.investRate;
					}else if(this.investRateUnit=='日'){
						r = this.investRate * 30;
					}
					if(this.investTimeUnit=='年'){
						n = this.investTimeLimit * 12;
					}else if(this.investTimeUnit=='月'){
						n = this.investTimeLimit;
					}
				}else if(this.investAgain=='日'){
					if(this.investRateUnit=='年'){
						r = this.investRate / 360;
					}else if(this.investRateUnit=='月'){
						r = this.investRate / 30;
					}else if(this.investRateUnit=='日'){
						r = this.investRate;
					}
					if(this.investTimeUnit=='年'){
						n = this.investTimeLimit * 360;
					}else if(this.investTimeUnit=='月'){
						n = this.investTimeLimit * 30;
					}else if(this.investTimeUnit=='日'){
						n = this.investTimeLimit;
					}
				}
				return {p,n,r};
			},
		},
		methods: {
			setInvestAgainUnit(){
				if(this.investCountMode=='单利'){
					this.investAgain = this.investTimeUnit;
				}else if(this.investCountMode=='复利'){
					if(this.investTimeUnit=='月'){
						if(this.investAgain=='年'){
							this.investAgain = '月';
						}
					}else if(this.investTimeUnit=='日'){
						if(this.investAgain=='年' || this.investAgain=='月'){
							this.investAgain = '日';
						}
					}
				}
				this.countIncome();
			},
			setInvestTimeUnit(){
				if(this.investAgain=='年'){
					if(this.investTimeUnit=='月' || this.investTimeUnit=='日'){
						this.investTimeUnit='年';
					}
				}else if(this.investAgain=='月'){
					if(this.investTimeUnit=='日'){
						this.investTimeUnit='月';
					}
				}
				this.countIncome();
			},
			countIncome() {
				if(this.investment>0 && this.investTimeLimit>0 && (this.investRate>0 || this.investWanOfIncome>0)){
					let conver = this.conversion;
					let p = conver.p;	//投资本金
					let n = conver.n;	//投资期数
					let r = conver.r; 	//投资利率
					if(this.investCountMode=='单利'){
						this.investIncomeInterest = this.approach(p * (r*0.01) * n, 100);
						this.investIncomeTotal = p + this.investIncomeInterest;
					}else if(this.investCountMode=='复利'){
						this.investIncomeTotal = this.approach(p * Math.pow(1+r*0.01, n), 100);
						this.investIncomeInterest = this.approach(this.investIncomeTotal - p, 100);
					}
				}
			},
			countRate(){
				if(this.investment>0 && this.investTimeLimit>0 && this.investIncomeInterest>0){
					let conver = this.conversion;
					let p = conver.p;	//投资本金
					let n = conver.n;	//投资期数
					let r = 0;
					this.investIncomeTotal = parseFloat(p) + parseFloat(this.investIncomeInterest);
					if(this.investAgain=='年'){
						if(this.investRateUnit=='年'){
							r =  (Math.exp(Math.log(this.investIncomeTotal/p)/n)-1)*100;
						}else if(this.investRateUnit=='月'){
							r =  (Math.exp(Math.log(this.investIncomeTotal/p)/n)-1)/30*100;
						}else if(this.investRateUnit=='日'){
							r =  (Math.exp(Math.log(this.investIncomeTotal/p)/n)-1)/360*100;
						}
					}else if(this.investAgain=='月'){
						if(this.investRateUnit=='年'){
							r =  (Math.exp(Math.log(this.investIncomeTotal/p)/n)-1)*12*100;
						}else if(this.investRateUnit=='月'){
							r =  (Math.exp(Math.log(this.investIncomeTotal/p)/n)-1)*100;
						}else if(this.investRateUnit=='日'){
							r =  (Math.exp(Math.log(this.investIncomeTotal/p)/n)-1)/30*100;
						}
					}else if(this.investAgain=='日'){
						if(this.investRateUnit=='年'){
							r =  (Math.exp(Math.log(this.investIncomeTotal/p)/n)-1)*360*100;
						}else if(this.investRateUnit=='月'){
							r =  (Math.exp(Math.log(this.investIncomeTotal/p)/n)-1)*30*100;
						}else if(this.investRateUnit=='日'){
							r =  (Math.exp(Math.log(this.investIncomeTotal/p)/n)-1)*100;
						}
					}
					this.investRate = this.approach(r, 10000);
					this.countWanOfIncome();
				}
			},
			countWanOfIncome(){
				if(this.investRate>0){
					if(this.investRateUnit=='年'){
						this.investWanOfIncome = this.approach(this.investRate * 0.01 * 10000 / 360, 10000);
					}else if(this.investRateUnit=='月'){
						this.investWanOfIncome = this.approach(this.investRate * 0.01 * 10000 / 30, 10000);
					}else if(this.investRateUnit=='日'){
						this.investWanOfIncome = this.approach(this.investRate * 0.01 * 10000, 10000);
					}
				}
			},
			parseWanOfIncome(){
				this.countWanOfIncome();
				this.countIncome(); 
			},
			parseRate(){
				if(this.investWanOfIncome>0){
					if(this.investRateUnit=='年'){
						this.investRate = this.approach(this.investWanOfIncome * 360 / 10000 * 100, 10000);
					}else if(this.investRateUnit=='月'){
						this.investRate = this.approach(this.investWanOfIncome * 30 / 10000 * 100, 10000);
					}else if(this.investRateUnit=='日'){
						this.investRate = this.approach(this.investWanOfIncome / 10000 * 100, 10000);
					}
				}
				this.countIncome(); 
			},
			switchCountMode(){
				if(this.investCountMode == '单利'){
					document.getElementById('investAgain').style.display = "none";
				}else if(this.investCountMode == '复利'){
					document.getElementById('investAgain').style.display = "";
				}
				this.countIncome(); 
			},
			handleScreen(){
				if(window.innerWidth<=767){
					if(investRate!=null){
						this.$refs.investRate.querySelector('input').maxLength = 6;
					}
					if(investIncomeInterest!=null){
						this.$refs.investIncomeInterest.querySelector('input').maxLength = 6;
					}
				}
				if(window.innerWidth>767){
					if(investRate!=null){
						this.$refs.investRate.querySelector('input').maxLength = 12;
					}
					if(investIncomeInterest!=null){
						this.$refs.investIncomeInterest.querySelector('input').maxLength = 12;
					}
				}
			}
		},
		mounted(){
			this.countWanOfIncome();
			this.switchCountMode();
			
			this.handleScreen();
			window.addEventListener("resize", this.handleScreen);
		},
		destroyed() {
			// 在组件生命周期结束的时候销毁。
			window.removeEventListener("resize", this.handleScreen);
		},
	}
</script>

<style scoped>
	.invest table tr td {
		height: 33px;
		text-align: left;
	}
	
	@media screen and (min-width: 1200px){
		.td1{
			width: 180px;
		}
		.td2{
			width: 200px;
		}
	}
	@media screen and (max-width: 1200px){
		.td1{
			width: 180px;
		}
		.td2{
			width: 200px;
		}
	}
	@media screen and (max-width: 767px){
		.td1{
			width: 116px;
		}
		.td2{
			width: 81px;
			white-space:normal;
		}
	}
</style>
